/* 定义颜色变量 */
:root {
    --primary-color: #4caf50;
    --header-bg-color: #333;
    --footer-bg-color: #333;
    --search-icon-bg-color: #f5f5f5; /* 添加搜索图标背景色变量 */
    --search-icon-padding: 5px; /* 添加搜索图标内边距变量 */
    --main-bg-color: #f5f5f5; /* 添加主内容区域背景色变量 */
}

/* 通用组件样式 */
.el-header, .el-footer {
    background-color: var(--header-bg-color);
    color: white;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.el-footer {
    background-color: var(--footer-bg-color);
    padding: 10px 0; /* 添加上下内边距 */
    text-align: center;
}

/* 导航菜单样式 */
.navbar {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0;
}


/* 定义logo容器的样式 */
.logo-container {
    display: flex;
    align-items: center;
    margin-right: auto; /* 将logo推到左侧 */
    width: 200px;
}

/* 定义logo图片的样式 */
.logo-container img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
}

/* 定义logo标题的样式 */
.logo-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-left: 5px;
}

/* 定义导航栏链接的样式 */
.el-link {
    margin-right: 10px; /* 右侧外边距 */
}

/* 定义头部样式 */
.el-header {
    display: flex;
}

/* 为Element UI的主内容区域设置背景颜色、内边距和宽度 */
.el-main {
    background-color: var(--main-bg-color); /* 使用自定义属性设置背景颜色 */
    padding: 20px; /* 设置内边距为20px */
    width: 100%; /* 设置宽度为100%，填充容器 */
}


.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0 180px;
    min-height: 614px;
}


.custom-width .el-input__inner {
    width: 300px;
}


/* 搜索图标样式 */
.el-icon-search {
    cursor: pointer; /* 当鼠标悬停时显示为手型，表示可点击 */
    border-radius: 3px;
    color: #333;
}




